<template>  
  <div>  
    <div class="header">  
      <el-button size="large" icon="Search" @click="navigateTo('/Note')">发现</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button size="large" icon="CreditCard" @click="navigateTo('/my-note')">笔记管理</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
      <el-button size="large"  icon="Position" @click="navigateTo('/note-upload')">发布笔记</el-button>  
    </div>  
    
    <!--第一个标签页：已发布-->
    <div class="border"> 
      <el-tabs v-model="activeName" style="width: 77%">  
        <el-tab-pane label="已发布" name="first" @click="handleApprove">  
          <div v-if="activeName === 'first'" class="note-list">  
            <p>共{{ publishedNoteCount }}条</p>  
            <div class="note-grid">  
              <div class="note-card" v-for="note in tableData" :key="note.id">  
                <div class="note-image">  
                  <el-image :src="'http://localhost:8080/images/upload/' + note.image" style="width: 100%; height: 150px;cursor: pointer;" @click="opennotedetail(note)"></el-image>  
                </div>  
                <div class="note-content">  
                  <h4>{{ note.title }}</h4>  
                  <div class="note-statistics">  
                    <span>浏览量: {{ note.view_count }}</span>&nbsp; 
                    <span>点赞量: {{ note.like_count }}</span>&nbsp;
                    <span>回复量: {{ note.comment_count }}</span>  
                  </div>  
                  <div class="note-action">
                    <el-button icon="Delete" size="small" plain round  @click="handleEdit(note)">编辑</el-button>
                 <el-button icon="Delete" size="small" plain round  @click="handleDelete(note)">删除</el-button>
                 </div>
                </div>  
                <div class="note-timestamp">  
                  <span>发布时间: {{ formatDate(note.create_time) }}</span>  
                </div>  
              </div>  
            </div>  
          </div>  
        </el-tab-pane>  

        <!--第二个标签页：待审核-->
        <el-tab-pane label="待审核" name="second" @click="handleReview">
          <div v-if="activeName === 'second'" class="note-list">
            <p>共{{ publishedNoteCount1 }}条</p>
            <div class="note-grid">  
              <div class="note-card" v-for="note in tableData1" :key="note.id">  
                <div class="note-image">  
                  <el-image :src="'http://localhost:8080/images/upload/' + note.image" style="width: 100%; height: 150px;"></el-image>  
                </div>  
                <div class="note-content">  
                  <h4>{{ note.title }}</h4>  
                  <div class="note-action">
                 <el-button icon="Delete" size="small" plain round  @click="handleDelete(note)">删除</el-button>
                 </div>
                </div>  
                <div class="note-timestamp">  
                  <span>提交时间: {{ formatDate(note.create_time) }}</span>  
                </div>  
              </div>  
            </div>  
          </div>  
        </el-tab-pane>  

        <!--第三个标签页：未通过-->
        <el-tab-pane label="未通过" name="third" @click="handleNotApprove">
          <div v-if="activeName === 'third'" class="note-list">
            <p>共{{ publishedNoteCount2 }}条</p>
            <div class="note-grid">  
              <div class="note-card" v-for="note in tableData2" :key="note.id">  
                <div class="note-image">  
                  <el-image :src="'http://localhost:8080/images/upload/' + note.image" style="width: 100%; height: 150px;"></el-image>  
                </div>  
                <div class="note-content">  
                  <h4>{{ note.title }}</h4> 
                  <div class="note-action">
                    <el-button icon="Delete" size="small" plain round  @click="handleEdit(note)">编辑</el-button>
                 <el-button icon="Delete" size="small" plain round  @click="handleDelete(note)">删除</el-button>
                 </div>
                </div>  
                <div class="note-timestamp">  
                  <span>提交时间: {{ formatDate(note.create_time) }}</span>  
                </div>  
              </div>  
            </div>  
          </div>  
        </el-tab-pane>  

        <!--第四个标签页：收藏笔记夹-->
        <el-tab-pane label="收藏笔记夹" name="fourth" @click="handleLike">
          <div v-if="activeName === 'fourth'" class="note-list">
            <p>共{{ publishedNoteCount3 }}条</p>
            <div class="note-grid">  
              <div class="note-card" v-for="note in tableData3" :key="note.id">  
                <div class="note-image">  
                  <el-image :src="'http://localhost:8080/images/upload/' + note.image" style="width: 100%; height: 150px;cursor: pointer;" @click="opennotedetail(note)"></el-image>  
                </div>  
                <div class="note-content">  
                  <h4>{{ note.title }}</h4>  
                  <div class="note-statistics">
                <span>发布者: {{ note.noteCreatorName }}</span>&nbsp;&nbsp;
                <span>点赞量: {{ note.like_count }}</span>&nbsp;&nbsp;
                 </div>
                  <div class="note-action">
                 <el-button icon="Delete" size="small" plain round  @click="handleDelete1(note)">删除</el-button>
                 </div>
                </div>  
                <div class="note-timestamp">  
                  <span>发布时间: {{ formatDate(note.create_time) }}</span> 
                </div>  
              </div>  
            </div>  
          </div>  
        </el-tab-pane>  
      </el-tabs> 

    </div>  
  </div> 
</template>  





<script>  
import { ElMessage, ElMessageBox } from 'element-plus';
  import axios from 'axios';
export default {  
  data() {
    return {  
      activeName: 'first',
      tableData: [], // 存储已发布的笔记数据  
      tableData1: [],   // 存储待审核的笔记数据 
      tableData2: [],   // 存储未通过的笔记数据 
      tableData3: [], //  存储收藏的笔记数据
      queryData: [],
      publishedNoteCount: 0, // 初始化已发布笔记的数量
      publishedNoteCount1: 0,   //初始化待审核笔记的数量
      publishedNoteCount2: 0,   //初始化审核通过笔记的数量
      publishedNoteCount3: 0,   //初始化已收藏笔记的数量
      userId: '' ,
      imageUrl:" "   , //图片URL地址
      
       clickedCard: null,   
      
    };  
  },  
  methods: {  
     // 格式化日期和时间
  formatDate(dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以加1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0'); // 获取小时并确保两位数
    const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟并确保两位数
    // 格式化为 YYYY年MM月DD日 HH:MM
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  },

    navigateTo(route) {  
      this.$router.push(route); // 使用路由跳转  
    },  

    //点击第一个标签页获取所有已发布的笔记
    handleApprove() {  
      console.log('加载所有已发布的笔记'); // 打印调试信息  
      this.getAllPublishedNotes(); // 获取所有已发布的笔记  
    },  

    //点击第二个标签页获取所有待审核的笔记
    handleReview() {  
      console.log('这里是待审核页面');  
      this.getAllReviewNotes();
    }, 

    //点击第三个标签页获取所有未通过的笔记
    handleNotApprove() {  
      console.log('这里是未通过页面'); 
      this.getAllNotApproveNotes(); 
    }, 

    //点击第四个标签页获取所有点赞的笔记
    handleLike() {  
      console.log('这里是已点赞页面');  
      this.getAllCollectionNotes();
    },  

    //进入编辑页面
    handleEdit(note) {
    // 传递 note.id 到 /note-edit 路由
    sessionStorage.setItem('note_create_id', note.note_create_id);
    this.navigateTo('/note-edit', note);
  },

  //进入笔记详情页面
   opennotedetail(note){
    sessionStorage.setItem('note_create_id', note.note_create_id);
    this.navigateTo('/note-detail', note);
  },

    //删除对应笔记（已发布、待审核、未通过）
    handleDelete(note) {  
  console.log("id", note.note_create_id);  
  ElMessageBox.confirm(  
      `删除后将无法恢复，确定要删除《${note.title}》这篇笔记吗?`, // 使用反引号来支持模板字符串  
      '删除笔记',  
      {  
          confirmButtonText: 'OK',  
          cancelButtonText: '取消',  
          type: 'warning',  
      }  
  ).then(() => {  
      this.$http.delete("/v1/NoteCreate/" + note.note_create_id).then((response) => {  
          console.log(response.data);  
          if (response.data == 1) {  
              ElMessage({  
                  type: 'success',  
                  message: '删除成功！',  
              }); 
              this.getAllPublishedNotes();   //重新加载已发布数据
              this.getAllReviewNotes();       //重新加载待审核数据
              this.getAllNotApproveNotes(); // 重新加载未通过数据  
          } else {  
              ElMessage({  
                  type: 'warning',  
                  message: '删除失败！',  
              });  
          }  
      });  
  }).catch(() => {  
      ElMessage({  
          type: 'info',  
          message: '取消成功',  
      });  
  });  
  console.log("singleDelete()...");  
},

   //删除已收藏笔记
   handleDelete1(note) {  
  console.log("id", note.collection_id);  
  ElMessageBox.confirm(  
      `确定要删除收藏的《${note.title}》这篇笔记吗?`, // 使用反引号来支持模板字符串  
      '删除收藏笔记',  
      {  
          confirmButtonText: 'OK',  
          cancelButtonText: '取消',  
          type: 'warning',  
      }  
  ).then(() => {  
      this.$http.delete("/v1/NoteCollection/" + note.collection_id).then((response) => {  
          console.log(response.data);  
          if (response.data == 1) {  
              ElMessage({  
                  type: 'success',  
                  message: '删除成功！',  
              });  
              this.getAllCollectionNotes() // 重新加载已收藏数据  
          } else {  
              ElMessage({  
                  type: 'warning',  
                  message: '删除失败！',  
              });  
          }  
      });  
  }).catch(() => {  
      ElMessage({  
          type: 'info',  
          message: '取消成功',  
      });  
  });  
  console.log("singleDelete()...");
},

   //获取已发布笔记总数
   fetchPublishedNoteCount() {
    axios.get(`/v1/NoteCreate/count`, {
      params: { note_status: "审核通过", user_id: this.userId }
    }).then(response => {
      this.publishedNoteCount = response.data; // 返回的是已发布笔记总数
      this.fetchPublishedNoteCount();
    });
  },

  //获取待审核笔记总数
  fetchPublishedNoteCount1() {
    axios.get(`/v1/NoteCreate/count`, {
      params: { note_status: "待审核", user_id: this.userId }
    }).then(response => {
      this.publishedNoteCount1 = response.data; // 返回的是待审核笔记总数
      this.fetchPublishedNoteCount1();
    });
  },

  //获取未通过笔记总数
  fetchPublishedNoteCount2() {
    axios.get(`/v1/NoteCreate/count`, {
      params: { note_status: "审核未通过", user_id: this.userId }
    }).then(response => {
      this.publishedNoteCount2 = response.data; // 返回的是未通过笔记总数
      this.fetchPublishedNoteCount2();
    });
  },

  //获取已收藏笔记总数
  fetchPublishedNoteCount3() {
    axios.get(`/v1/NoteCollection/count`, {
      params: {user_id: this.userId }
    }).then(response => {
      this.publishedNoteCount3 = response.data; // 返回的是已收藏笔记总数
      this.fetchPublishedNoteCount3();
    });
  },

  //获取审核通过的笔记
    getAllPublishedNotes() {
      this.$http.get("/v1/NoteCreateinfo1", {
      params: {  note_status: `审核通过`,user_id : this.userId} // 添加过滤参数
    }).then((response) => {
      this.tableData = response.data.list; // 过滤审核通过的笔记
      this.queryData = this.tableData; // 更新 queryData，使其包含当前页的数据列表。
      console.log(this.tableData);
   
    }); 
  },

  //获取待审核的笔记
  getAllReviewNotes() {
    this.$http.get("/v1/NoteCreateinfo1", {
      params: {note_status: `待审核`,user_id : this.userId} // 添加过滤参数
    }).then((response) => {
      this.tableData1 = response.data.list;  // 过滤待审核的笔记
      this.queryData = this.tableData1; // 更新 queryData，使其包含当前页的数据列表。
      console.log(this.tableData1);
 
    }); 
  },

  //获取审核未通过的笔记
  getAllNotApproveNotes() {
    this.$http.get("/v1/NoteCreateinfo1", {
      params: { note_status: `审核未通过`,user_id : this.userId} // 添加过滤参数
    }).then((response) => {
      this.tableData2 = response.data.list; // 过滤审核未通过的笔记
      this.queryData = this.tableData2; // 更新 queryData，使其包含当前页的数据列表。
      console.log(this.tableData2);

    }); 
  },

  //获取收藏的笔记
    getAllCollectionNotes(){
      this.$http.get("/v1/NoteCollectioninfo", {
      params: {user_id : this.userId} // 添加过滤参数
    }).then((response) => {
      this.tableData3 = response.data.list; // 过滤收藏的笔记
      this.queryData = this.tableData3; // 更新 queryData，使其包含当前页的数据列表。
      console.log(this.tableData3);
    }); 
    },
},

  mounted() {
      this.userId = localStorage.getItem('user_id');  //使用localStorage永久存储，不会改变
      console.log("User ID:", this.userId); // 输出用户 ID  
      this.getAllPublishedNotes();   //获取已发布笔记
      this.getAllReviewNotes();      //获取待审核笔记
      this.getAllNotApproveNotes();  //获取未通过笔记
      this.getAllCollectionNotes();  //获取已收藏笔记
      this.fetchPublishedNoteCount(); // 获取已发布笔记的总数
      this.fetchPublishedNoteCount1();  // 获取待审核笔记的总数
      this.fetchPublishedNoteCount2();  // 获取未通过笔记的总数
      this.fetchPublishedNoteCount3();  // 获取已收藏笔记的总数
}
}  
</script>  

<style scoped>
.header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 30px;
}

.note-grid {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr); /* 四列布局 */  
  gap: 40px; /* 卡片之间的间距 */  
}  

.note-card {  
  border: 1px solid #e0e0e0; /* 卡片边框 */  
  border-radius: 8px; /* 圆角 */  
  background-color: #fff; /* 卡片背景色 */  
  display: flex;  
  flex-direction: column; /* 垂直排列元素 */  
  overflow: hidden; /* 防止溢出 */  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
  margin-bottom: 20px; /* 卡片底部外边距 */  
  min-height: 250px; /* 设置最小高度，确保卡片足够高以显示完整图片 */
  align-items: center; /* 水平居中所有子元素 */
  width: 250px ;/* 调整卡片宽度，增加宽度 */ 
  margin-left: 12px
}

.note-image {  
 /* 固定图片高度 */  
 width: 80%; /* 封面图片宽度 */
 height: 170px; /* 自动高度以保持图片比例 */
  display: flex; /* 使用flex布局 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
  margin-bottom: 0px; /* 图片与内容之间的间隔 */  
}

.note-content {  
  flex: 1; /* 占用剩余空间 */  
  padding: 10px; /* 内部填充 */  
}

.note-statistics {  
  margin: 20px 0; /* 顶部和底部间距 */  
  font-size: 14px; /* 字体大小 */  
  color: #666; /* 字体颜色 */  
}

.note-timestamp {  
  padding: 10px 20px; /* 发布时间的填充 */  
  background-color: #f5f5f5; /* 背景色 */  
  text-align: right; /* 右对齐 */  
  display: flex; /* 使用flex布局 */  
  justify-content: space-between; /* 两端对齐 */  
  align-items: center; /* 垂直居中 */  
}

.border {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 20px;
}
.note-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 700px; /* 设置一个最大高度，根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动 */
  padding-right: 20px; /* 为滚动条留出空间，避免内容被遮挡 */
}

/* 如果需要，可以为每个 tab-pane 的内容添加不同的最大高度 */
#first .note-list {
  max-height: 700px;
}
#second .note-list {
  max-height: 700px;
}
#third .note-list {
  max-height: 700px;
}
#fourth .note-list {
  max-height: 700px;
}
.note-item {
display: flex;
align-items: center;
margin-bottom: 20px;
justify-content: space-between;

}


.note-info {
flex-grow: 1;
text-align: left;
display: inline-block;
white-space: nowrap;
}


.note-statistics span {
white-space: nowrap; /* 防止文本换行 */
}
.note-action {
  display: flex;
  align-items: right;
  justify-content: center; /* 将按钮推到容器的末尾 */
  margin-top: auto; /* 确保与上方内容对齐 */
  flex-shrink: 0; /* 防止内容过多时缩小 */
}

</style>
